<template>
    <div class="erp-board">
        <div class="board-search">
            <a-range-picker :mode="['month', 'month']" :open="yearShowOne" :placeholder="['开始月份', '结束月份']" format="YYYY-MM"
                style="width: 200px;margin-right: 20px;" :value="time" @openChange="openChange"
                @panelChange="panelChange" />
        </div>
        <div style="height: 40px;"></div>
        <div class="overview board">
            <div class="item-title">
                <strong>流程运营总览</strong>
                <span>截止{{closeTime}}</span>
            </div>
            <overview @processData="processData" :time="time"></overview>
        </div>
        <!-- <div class="analysis board">
            <div class="item-title">
                <strong>智能分析</strong>
                <a-button type="link" @click="linkMore">更多</a-button>
            </div>
            <analysis></analysis>
        </div> -->
        <div class="trend board">
            <div class="item-title">
                <strong>流程效率趋势</strong>
                <!-- <a-button type="link" @click="linkMore">更多</a-button> -->
            </div>
            <trend></trend>
        </div>
        <div class="ranking board">
            <div class="item-title">
                <strong :time="time">效率排名</strong>
                <!-- <a-button type="link" @click="linkMore">更多</a-button> -->
            </div>
            <ranking @processTaskModal="processTask" :time="time"></ranking>
        </div>
        <overviewModal :visible.sync="overviewModalVisible" :modalType='modalType' :time="time" @processTask="processTask">
        </overviewModal>
        <processTaskModal ref="processTaskModal" :visible.sync="processTaskModalVisible"></processTaskModal>
    </div>
</template>
<script>
import overview from './modules/overview.vue';
import analysis from './modules/analysis.vue'
import ranking from './modules/ranking.vue'
import trend from './modules/trend.vue'
import overviewModal from './modules/overviewModal.vue';
import processTaskModal from './modules/processTaskModal.vue'
import moment from 'dayjs'
export default {
    name: "erp-board",
    components: {
        overview,
        analysis,
        ranking,
        trend,
        overviewModal,
        processTaskModal,
    },
    data() {
        return {
            // 搜索参数
            time: [],
            yearShowOne: false,
            overviewModalVisible: false,
            processTaskModalVisible: false,
            modalType: {},// 点击某一项
            process:{},// 流程参数
            
        }
    },
    created() {
        this.time = [moment(new Date).format("YYYY-MM"), moment(new Date).format("YYYY-MM")]
    },
    computed:{
        closeTime(){
            let time = moment(this.time[1]).endOf('month').format('YYYY-MM-DD').split('-')
            return `${time[0]}年${time[1]}月${time[2]}日`
        },
    },
    methods: {
        changeTime() { },
        // 总览流程数据
        processData(type) {
            this.overviewModalVisible = true
            this.modalType = type
        },
        // 历史流程
        processTask(val) {
            // this.process = val
            // this.processTaskModalVisible = true
            val.sortType="consumeTime"
            this.$refs.processTaskModal.showModal(val)
        },

        openChange(status) {
            this.yearShowOne = status;
        },
        panelChange(value) {
            console.log(value[0] > value[1])
            if(value[0] > value[1]) {
                this.time = [value[1],value[0]]
            }else {
                this.time = value
            }
            this.yearShowOne = false;
        },
    }
}
</script>




<style lang="less" scoped>
div {
    box-sizing: border-box !important;
}

.erp-board {
    position: relative;

    .board-search {
        background-color: #fff;
        display: flex;
        justify-content: flex-end;
        padding: 10px 0;
        width: calc(100% + 24px);
        position: absolute;
        top: -12px;
        left: -12px;
    }

    .board {
        .item-title {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            align-items: center;
        }
    }
}
</style>